<template>
    <div class="brand-box">
        <!--查询表单-->
        <div class="search-box">
            <el-form :inline="true" class="demo-form-inline" size="mini">
                <el-form-item label="商品名称" style="float: left">
                    <el-input placeholder="商品名称" v-model="goodsParams.goodName"></el-input>
                </el-form-item>
                <el-form-item label="商品型号" style="float: left">
                    <el-input placeholder="商品型号" v-model="goodsParams.productModel"></el-input>
                </el-form-item>


                <el-form-item label="商品颜色" :label-width="formLabelWidth" prop="colorId" style="float: left">
                    <el-select v-model="goodsParams.colorId">
                        <el-option v-for="type in colorList" :key="type.colorId" :label="type.colorName"
                                   :value="type.colorId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品品牌" :label-width="formLabelWidth" prop="brandId" style="float: left">
                    <el-select v-model="goodsParams.brandId">
                        <el-option v-for="type in brandList" :key="type.brandId" :label="type.brandName"
                                   :value="type.brandId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="商品分类" :label-width="formLabelWidth" prop="typeId" style="float: left">
                    <el-select v-model="goodsParams.typeId">
                        <el-option v-for="type in typeList" :key="type.typeId" :label="type.typeName"
                                   :value="type.typeId">
                        </el-option>
                    </el-select>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click="findGoods" style="margin-left: 600px">查询</el-button>
                    <el-button type="warning" @click="resetGoodsForm">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--操作按钮-->
        <div class="crud-box">
            <el-button style="margin-right: 85px;float: right" type="primary" icon="el-icon-edit" size="mini"
                       @click="dialogVisibleAddSecond=true,secondGoodsData={},imageUrl=''">创建二类商品
            </el-button>
            <el-button style="margin-right: 35px;float: right" type="primary" icon="el-icon-edit" size="mini"
                       @click="dialogVisibleAddFirst=true">创建一类商品
            </el-button>
        </div>
        <!--table展示数据-->
        <div class="table-box">
            <el-table
                    :data="goodsData"
                    style="width: 100%"
                    @selection-change="checkBoxSelectionChange"
            >

                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="goodName"
                        label="商品名称"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="typeName"
                        label="商品分类"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="brandName"
                        label="商品品牌">
                    <!--                    <template v-slot="suibianxie">-->
                    <!--                        <a :href="suibianxie.row.brandSite">{{suibianxie.row.brandSite}}</a>-->
                    <!--                    </template>-->

                </el-table-column>
                <el-table-column
                        align="center"
                        prop="productModel"
                        label="商品型号">
                    <!--                    <template v-slot="obj">-->
                    <!--                        <img :src="obj.row.brandLogo" height="35px">-->
                    <!--                    </template>-->

                </el-table-column>
                <el-table-column
                        align="center"
                        prop="colorName"
                        label="商品颜色"
                        width="180">
                </el-table-column>
                <el-table-column
                        align="center"
                        prop="address"
                        label="操作">

                    <template v-slot="obj">
                        <el-button type="success" icon="el-icon-edit" size="mini"
                                   @click="showGoodsDetails(obj.row),showGoods=true">
                            详情
                        </el-button>
                        <el-button type="success" icon="el-icon-edit" size="mini"
                                   @click="editForm.goodId=obj.row.goodId,dialogVisibleEdit=true,initProduct(obj.row)">
                            修改
                        </el-button>
                        <el-popconfirm
                                confirm-button-text='确认'
                                cancel-button-text='取消'
                                @confirm="deleteProductById"
                                icon="el-icon-info"
                                icon-color="red"
                                title="确定删除这一条数据吗？"
                        >
                            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"
                                       @click="deleteForm.goodId=obj.row.goodId">删除
                            </el-button>
                        </el-popconfirm>
                    </template>


                </el-table-column>
            </el-table>
        </div>
        <!--分页-->
        <div class="page-box">
            <el-pagination
                    background
                    :current-page="goodsParams.currentPage"
                    :page-size="goodsParams.pageSize"
                    layout="prev, pager, next"
                    @current-change="currentPageChange1"
                    :total="goodsTotal">
            </el-pagination>
        </div>


        <!--弹框-->
        <div class="dialog-box">

            <el-dialog
                    title="添加一类商品"
                    :visible.sync="dialogVisibleAddFirst"
                    width="40%"

            >
                <template>
                    <el-dialog
                            width="70%"
                            title="内层 Dialog"
                            :visible.sync="innerVisible"
                            :append-to-body="true">
                        <div class="search-box">
                            <el-form :inline="true" class="demo-form-inline" size="mini">
                                <el-form-item label="存货档案编码" style="float: left">
                                    <el-input placeholder="存货档案编码" v-model="searchParams.productId"></el-input>
                                </el-form-item>
                                <el-form-item label="产品型号" style="float: left">
                                    <el-input placeholder="产品型号" v-model="searchParams.productModel"></el-input>
                                </el-form-item>


                                <el-form-item label="基础库-颜色" :label-width="formLabelWidth" prop="colorId"
                                              style="float: left">
                                    <el-select v-model="searchParams.colorId">
                                        <el-option v-for="type in colorList" :key="type.colorId" :label="type.colorName"
                                                   :value="type.colorId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="基础库-产品品牌" :label-width="formLabelWidth" prop="brandId"
                                              style="float: left">
                                    <el-select v-model="searchParams.brandId">
                                        <el-option v-for="type in brandList" :key="type.brandId" :label="type.brandName"
                                                   :value="type.brandId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="基础库-产品分类" :label-width="formLabelWidth" prop="typeId"
                                              style="float: left">
                                    <el-select v-model="searchParams.typeId">
                                        <el-option v-for="type in typeList" :key="type.typeId" :label="type.typeName"
                                                   :value="type.typeId">
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="findPage" style="margin-left: 600px">查询
                                    </el-button>
                                    <el-button type="warning" @click="resetForm">重置</el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="table-box">
                            <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    @selection-change="checkBoxSelectionChange"
                            >

                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="productId"
                                        label="存货档案编码"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="productType"
                                        label="基础库-分类"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="productBrand"
                                        label="基础库-品牌">

                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="productModel"
                                        label="基础库-型号">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="productColor"
                                        label="基础库-颜色"
                                        width="180">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        prop="address"
                                        label="操作">

                                    <template v-slot="obj">
                                        <el-button type="success" icon="el-icon-edit" size="mini"
                                                   @click="innerVisible=false,pickProduct(obj.row)">
                                            选择
                                        </el-button>
                                    </template>


                                </el-table-column>
                            </el-table>
                        </div>
                        <!--分页-->
                        <div class="page-box">
                            <el-pagination
                                    background
                                    :current-page="searchParams.currentPage"
                                    :page-size="searchParams.pageSize"
                                    layout="prev, pager, next"
                                    @current-change="currentPageChange"
                                    :total="total">
                            </el-pagination>
                        </div>
                    </el-dialog>
                </template>
                <el-button type="primary" @click="innerVisible = true">选择一类商品</el-button>
                
                <el-form ref="form" :model="products" label-width="240px">
                    <el-form-item label="存货档案编码" style="margin-right: 200px">
                        <el-input placeholder="存货档案编码" v-model="products.productId" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="基础库-分类" style="margin-right: 200px">
                        <el-input placeholder="基础库-分类" v-model="products.productType" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="基础库-品牌" style="margin-right: 200px">
                        <el-input placeholder="基础库-品牌" v-model="products.productBrand" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="基础库-型号" style="margin-right: 200px">
                        <el-input placeholder="基础库-型号" v-model="products.productModel" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="基础库-颜色" style="margin-right: 200px">
                        <el-input placeholder="基础库-颜色" v-model="products.productColor" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称" style="margin-right: 200px">
                        <el-input placeholder="商品名称" v-model="products.goodName" style="width: 205px"></el-input>
                    </el-form-item>

                    <el-form-item label="市场价" style="margin-right: 200px">
                        <el-input placeholder="市场价" v-model="products.goodMarketprice" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="商城价" style="margin-right: 200px">
                        <el-input placeholder="商城价" v-model="products.goodMallprice" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="最低库存量" style="margin-right: 200px">
                        <el-input placeholder="最低库存量" v-model="products.goodMinstorage" style="width: 205px"></el-input>
                    </el-form-item>
                </el-form>
                <br>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleAddFirst = false" size="small">取 消</el-button>
    <el-button type="primary" @click="dialogVisibleAddFirst = false,productAddFirst()" size="small">确 定</el-button>
                </span>
            </el-dialog>

        </div>

        <div class="dialog-box">
            <el-dialog
                    title="添加二类商品"
                    :visible.sync="dialogVisibleAddSecond"
                    width="40%"
            >
                <el-form ref="form" :model="secondGoodsData" label-width="240px">
                    <el-form-item label="商品颜色" :label-width="formLabelWidth" prop="colorId" style="margin-left: 120px">
                        <el-select v-model="secondGoodsData.goodsColorid">
                            <el-option v-for="type in colorList" :key="type.colorId" :label="type.colorName"
                                       :value="type.colorId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品品牌" :label-width="formLabelWidth" prop="brandId" style="margin-left: 120px">
                        <el-select v-model="secondGoodsData.goodsBrandid">
                            <el-option v-for="type in brandList" :key="type.brandId" :label="type.brandName"
                                       :value="type.brandId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品分类" :label-width="formLabelWidth" prop="typeId" style="margin-left: 120px">
                        <el-select v-model="secondGoodsData.goodsTypeid">
                            <el-option v-for="type in typeList" :key="type.typeId" :label="type.typeName"
                                       :value="type.typeId">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品型号" style="margin-right: 200px">
                        <el-input placeholder="商品型号" v-model="secondGoodsData.goodsModel" style="width: 205px"
                                  ></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称" style="margin-right: 200px">
                        <el-input placeholder="商品名称" v-model="secondGoodsData.goodsName" style="width: 205px"></el-input>
                    </el-form-item>

                    <el-form-item label="市场价" style="margin-right: 200px">
                        <el-input placeholder="市场价" v-model="secondGoodsData.goodsMarketprice" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="商城价" style="margin-right: 200px">
                        <el-input placeholder="商城价" v-model="secondGoodsData.goodsMallprice" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="最低库存量" style="margin-right: 200px">
                        <el-input placeholder="最低库存量" v-model="secondGoodsData.goodsMinstorage" style="width: 205px"></el-input>
                    </el-form-item>
                </el-form>
                <br>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleAddSecond = false" size="small">取 消</el-button>
    <el-button type="primary" @click="dialogVisibleAddSecond = false,addSecondGoods()" size="small">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="dialog-box">
            <el-dialog
                    title="修改"
                    :visible.sync="dialogVisibleEdit"
                    width="40%"
            >
                <el-form ref="form" :model="goods" label-width="240px">
                    <el-form-item label="存货档案编码" style="margin-right: 200px">
                        <el-input placeholder="存货档案编码" v-model="goods.goodProductid" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="基础库-分类" style="margin-right: 200px">
                        <el-input placeholder="基础库-分类" v-model="goods.typeName" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="基础库-品牌" style="margin-right: 200px">
                        <el-input placeholder="基础库-品牌" v-model="goods.brandName" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="基础库-型号" style="margin-right: 200px">
                        <el-input placeholder="基础库-型号" v-model="goods.productModel" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="基础库-颜色" style="margin-right: 200px">
                        <el-input placeholder="基础库-颜色" v-model="goods.colorName" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称" style="margin-right: 200px">
                        <el-input placeholder="商品名称" v-model="goods.goodName" style="width: 205px"></el-input>
                    </el-form-item>

                    <el-form-item label="市场价" style="margin-right: 200px">
                        <el-input placeholder="市场价" v-model="goods.goodMarketprice" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="商城价" style="margin-right: 200px">
                        <el-input placeholder="商城价" v-model="goods.goodMallprice" style="width: 205px"></el-input>
                    </el-form-item>
                    <el-form-item label="最低库存量" style="margin-right: 200px">
                        <el-input placeholder="最低库存量" v-model="goods.goodMinstorage" style="width: 205px"></el-input>
                    </el-form-item>
                </el-form>
                <br>
                <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleEdit = false" size="small">取 消</el-button>
    <el-button type="primary" @click="dialogVisibleEdit = false,productEdit()" size="small">确 定</el-button>
                </span>
            </el-dialog>
        </div>
        <div class="dialog-box">
            <el-dialog
                    title="详情"
                    :visible.sync="showGoods"
                    width="40%"
            >
                <el-form ref="form" :model="details" label-width="240px">
                    <el-form-item label="存货档案编码" style="margin-right: 200px">
                        <el-input placeholder="存货档案编码" v-model="details.goodProductid" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="基础库-分类" style="margin-right: 200px">
                        <el-input placeholder="基础库-分类" v-model="details.typeName" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="基础库-品牌" style="margin-right: 200px">
                        <el-input placeholder="基础库-品牌" v-model="details.brandName" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="基础库-型号" style="margin-right: 200px">
                        <el-input placeholder="基础库-型号" v-model="details.productModel" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="基础库-颜色" style="margin-right: 200px">
                        <el-input placeholder="基础库-颜色" v-model="details.colorName" style="width: 205px"
                                  :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="商品名称" style="margin-right: 200px">
                        <el-input placeholder="商品名称" v-model="details.goodName" style="width: 205px" :disabled="true"></el-input>
                    </el-form-item>

                    <el-form-item label="市场价" style="margin-right: 200px">
                        <el-input placeholder="市场价" v-model="details.goodMarketprice" style="width: 205px" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="商城价" style="margin-right: 200px">
                        <el-input placeholder="商城价" v-model="details.goodMallprice" style="width: 205px" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="最低库存量" style="margin-right: 200px">
                        <el-input placeholder="最低库存量" v-model="details.goodMinstorage" style="width: 205px" :disabled="true"></el-input>
                    </el-form-item>
                </el-form>
                <br>
                <span slot="footer" class="dialog-footer">
    <el-button @click="showGoods = false" size="small">取 消</el-button>
    <el-button type="primary" @click="showGoods = false,details={}" size="small">确 定</el-button>
                </span>
            </el-dialog>
        </div>

    </div>

</template>

<script>
    import goodsmanage from './goodsmanage'

    export default goodsmanage;
</script>

<style src="./index.scss" lang="scss">
</style>